<script setup>
 // 导入编程式路由
  import {useRouter} from 'vue-router'
  import {defineSchedule} from '../store/scheduleStore'
  import {defineUser} from '../store/userStore'

  let router = useRouter()
  let sysUser = defineUser()
  let schedule = defineSchedule()
  // 退出登录接口
  function logout(){
    // 清除pinia中的数据
    sysUser.$reset()
    schedule.$reset()
    // 跳转回登录页
    router.push('/login')

  }

</script>

<template>
  <div>
    <h1 class="ht">欢迎使用日程管理系统</h1>
    <div> 
      <div class="optionDiv" v-if="sysUser.username==''"> 
        <router-link to="/login">
          <button class="bls">登录</button>
        </router-link>
        <router-link to="/register">
          <button class="bls">注册</button>
        </router-link>
      </div>

      <div class="optionDiv" v-else>
        欢迎 {{ sysUser.username }}
        <button class="blb" @click="logout()">退出登录</button>
        <router-link to="/showSchedule">
          <button class="blb">查看我的日程</button> 

        </router-link> 

      </div>

      <br>
    </div>
  </div>

</template>

<style scoped>
  .ht{
    text-align: center;
    color: cadetblue;
    font-family: 幼圆;
  }
  .bls{
    border: 2px solid powderblue;
    border-radius: 4px;
    width: 60px;
    background-color: antiquewhite;
  }
  .blb{
    border: 2px solid powderblue;
    border-radius: 4px;
    width: 100px;
    background-color: antiquewhite;
  }
  .optionDiv{
    width: 400px;
    float: right;
  }
</style>
